<template>
  <div class="panel panel-default">
    <div class="panel-heading  position-relative">
      <TitleTip :title=titleDetail position="bottom">
        <span class="fs-6 fw-lighter position-absolute end-0" style="margin-right: 10px">
            {{this.$store.state.user.userBox.pill.length+this.$store.state.user.userBox.arms.length+this.$store.state.user.userBox.subject.length}}
          /{{Math.ceil((this.$store.state.user.userInfo.soul+this.$store.state.user.userInfo.buff.soul))}}
          </span>
        <h3 class="panel-title">
          {{ title }}
        </h3>
      </TitleTip>
    </div>
    <div class="panel-body">
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane"
                  type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">法宝
          </button>
        </li>

        <li class="nav-item" role="presentation">
          <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane"
                  type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">秘籍
          </button>
        </li>

        <li class="nav-item" role="presentation">
          <button class="nav-link" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane"
                  type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">丹药
          </button>
        </li>
      </ul>
      <div class="tab-content" id="myTabContent" style="overflow-y: auto; min-height: 258px;height: 35vh">
        <!--法宝-->
        <div class="tab-pane fade show active" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
          <ul class="list-group list-group-line-none">
            <template v-for="(item,key) in this.$store.state.user.userBox.arms" :key="item">
              <li class="list-group-item">
                <div class="panel-nav" data-bs-toggle="collapse" :href="'#collapseBoxArms'+key" role="button"
                     aria-expanded="false"
                     :aria-controls="'collapseBoxArms'+key">
                  <div class="btn-group pull-right" role="group">
                    <button @click="wearArms(key)" class="btn btn-default btn-xs">炼化</button>
                    <button @click="abandonArms(key)" class="btn btn-default btn-xs">丢弃</button>
                  </div>
                  <button type="button" class="btn btn-xs" style="font-size: 6px" disabled>{{ item.levelName }}</button>
                  <TitleTip :title="
                      (item.hpBuff>0?item.hpBuff+'血量、':'')+
                      (item.hotBuff>0?item.hotBuff+'回血速度、':'')+
                      (item.levelUpOddsBuff>0?item.levelUpOddsBuff+'突破概率、':'')+
                      (item.travelSpeedBuff>0?item.travelSpeedBuff+'历练速度、':'')"
                              position="bottom">
                      {{ item.name ?? '' }}
                  </TitleTip>
                </div>
              </li>

              <li class="list-group-item collapse" :id="'collapseBoxArms'+key">
                <ul class="list-group list-group-compact">
                  <li :class="item.hpBuff<=0?'d-none':''" class="list-group-item">增加{{item.hpBuff}}血量</li>
                  <li :class="item.hotBuff<=0?'d-none':''" class="list-group-item">增加{{item.hotBuff}}回血速度</li>
                  <li :class="item.levelUpOddsBuff<=0?'d-none':''" class="list-group-item">增加{{item.levelUpOddsBuff}}的突破概率</li>
                  <li :class="item.travelSpeedBuff<=0?'d-none':''" class="list-group-item">增加{{item.travelSpeedBuff}}的历练速度</li>
                </ul>
              </li>
            </template>
          </ul>
        </div>

        <!--秘籍-->
        <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
          <ul class="list-group list-group-line-none">
            <template v-for="(item,key) in this.$store.state.user.userBox.subject" :key="item">
              <li class="list-group-item">
                <div class="panel-nav" data-bs-toggle="collapse" :href="'#collapseBoxSubject'+key" role="button"
                     aria-expanded="false"
                     :aria-controls="'collapseBoxSubject'+key">
                  <div class="btn-group pull-right" role="group">
                    <button @click="studySubject(key)" class="btn btn-default btn-xs">修习</button>
                    <button @click="abandonSubject(key)" class="btn btn-default btn-xs">丢弃</button>
                  </div>
                  <button type="button" class="btn btn-xs" style="font-size: 6px" disabled>{{ item.levelName }}</button>
                  <TitleTip :title="
                      (item.expSpeedBuff>0?item.expSpeedBuff+'修为速度、':'')+
                      (item.hpBuff>0?item.hpBuff+'血量、':'')+
                      (item.hotBuff>0?item.hotBuff+'回血速度、':'')+
                      (item.levelUpOddsBuff>0?item.levelUpOddsBuff+'突破概率、':'')+
                      (item.travelSpeedBuff>0?item.travelSpeedBuff+'历练速度、':'')+
                      (item.soulBuff>0?item.soulBuff+'灵魂、':'')+
                      (item.lifeBuff>0?item.lifeBuff+'寿元、':'')"
                            position="bottom">
                    {{ item.name ?? '' }}
                  </TitleTip>
                </div>
              </li>
              <li class="list-group-item collapse" :id="'collapseBoxSubject'+key">
                <ul class="list-group list-group-compact">
                  <li :class="item.expSpeedBuff<=0?'d-none':''" class="list-group-item text-success">增加{{item.expSpeedBuff}}修为速度</li>
                  <li :class="item.hpBuff<=0?'d-none':''" class="list-group-item">增加{{item.hpBuff}}血量</li>
                  <li :class="item.hotBuff<=0?'d-none':''" class="list-group-item">增加{{item.hotBuff}}回血速度</li>
                  <li :class="item.levelUpOddsBuff<=0?'d-none':''" class="list-group-item">增加{{item.levelUpOddsBuff}}的突破概率</li>
                  <li :class="item.travelSpeedBuff<=0?'d-none':''" class="list-group-item">增加{{item.travelSpeedBuff}}的历练速度</li>
                  <li :class="item.soulBuff<=0?'d-none':''" class="list-group-item">增加灵魂{{item.soulBuff}}强度</li>
                  <li :class="item.lifeBuff<=0?'d-none':''" class="list-group-item">增加寿元{{item.lifeBuff}}</li>
                </ul>
              </li>
            </template>
          </ul>
        </div>

        <!--丹药-->
        <div class="tab-pane fade" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab"
             tabindex="0">
          <ul class="list-group">
            <li v-for="item in this.$store.state.user.userBox.pill" :key="item"
                class="list-group-item d-flex justify-content-between align-items-center">
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleTip from './TitleTip.vue'
import Base from "../store/modules/base"

export default {
  name: 'UserBox',
  data: function () {
    return {
      title: "储物袋",
      titleDetail: "储物袋空间大小，受灵魂强度影响",
    }
  },
  components: {
    TitleTip,
  },
  methods: {
    /**
     * 学习功法
     * @param key
     * @returns {boolean}
     */
    studySubject(key) {
      let userSubjectSize = Base.getUserSubjectSize(this.$store.state.user.userInfo);
      let userSubjectUseSize = this.$store.state.user.userSubject.length
      if (userSubjectUseSize >= userSubjectSize) {
        this.$message.openMessage('<span class="text-danger">灵魂强度不足</span>，需要提高灵魂强度')
        return false
      }

      let subject = this.$store.state.user.userBox.subject[key];
      // 剔除包裹功法
      this.$store.state.user.userBox.subject.splice(key, 1)
      // 暂存首个功法
      let studySubject = this.$store.state.user.userSubject[0]
      if (studySubject && studySubject.state === 1) {
        // 剔除首个功法
        this.$store.state.user.userSubject.splice(0, 1);
      }
      // 放入学习功法列表
      this.$store.state.user.userSubject.unshift(subject)
      // 放回主修功法
      if (studySubject && studySubject.state === 1) {
        this.$store.state.user.userSubject.unshift(studySubject);
      }


      // 增加人物buff
      // this.$store.state.user.userInfo.buff.expSpeed += subject.expSpeedBuff // 主修功法才加修炼速度
      this.$store.state.user.userInfo.buff.levelUpOdds += subject.levelUpOddsBuff
      this.$store.state.user.userInfo.buff.travelSpeed += subject.travelSpeedBuff
      this.$store.state.user.userInfo.buff.soul += subject.soulBuff
      // this.$store.state.user.userInfo.buff.hp += subject.hpBuff
      this.$store.state.user.userInfo.buff.hot += subject.hotBuff
      this.$store.state.user.userInfo.buff.life += subject.lifeBuff
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);

      return true
    },

    /**
     * 炼化法宝
     * @param key
     * @returns {boolean}
     */
    wearArms(key) {
      let userArmsSize = Base.getUserArmsSize(this.$store.state.user.userInfo);
      let userArmsUseSize = this.$store.state.user.userArms.length
      if (userArmsUseSize >= userArmsSize) {
        this.$message.openMessage('<span class="text-danger">灵魂强度不足</span>，需要提高灵魂强度')
        return false
      }
      let arms = this.$store.state.user.userBox.arms[key];
      this.$store.state.user.userBox.arms.splice(key, 1)
      this.$store.state.user.userArms.unshift(arms)
      // 增加人物buff
      this.$store.state.user.userInfo.buff.levelUpOdds += arms.levelUpOddsBuff
      this.$store.state.user.userInfo.buff.travelSpeed += arms.travelSpeedBuff
      this.$store.state.user.userInfo.buff.hp += arms.hpBuff
      // this.$store.state.user.userInfo.hp += arms.hpBuff
      this.$store.state.user.userInfo.buff.hot += arms.hotBuff
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
      return true
    },

    /**
     * 丢弃功法
     * @param key
     */
    abandonSubject(key){
      this.$store.state.user.userBox.subject.splice(key, 1);
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
    },

    /**
     * 丢弃法宝
     * @param key
     */
    abandonArms(key){
      this.$store.state.user.userBox.arms.splice(key, 1);
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->


<style scoped>
ul, li {
  border-radius: 0;
}

.list-group-line-none > li:first-child {
  border-top: 0;

}

.list-group-line-none > li:last-child {
  border-bottom: 0;
}

.list-group-line-none > li {
  border-right: 0;
  border-left: 0;
}

.list-group {
  margin-bottom: 0;
}
</style>
